import React from 'react';
import { Button } from 'react-vant';
import { useNavigate } from 'react-router-dom';
export default function SkinAnalysis() {
    const router = useNavigate()
    const backhome = () => {
        router('/app/shou')
    }
    const gotopage = () => {
        router('/app/analy')
    }
  return (
    <div style={{ background: '#fff', height: '100vh' }}>
      <img
        src="https://tse3-mm.cn.bing.net/th/id/OIP-C.ZSDhowny93xhitcImdubpAHaLG?w=156&h=184&c=7&r=0&o=5&cb=iwc2&dpr=1.7&pid=1.7"
        alt="skin analysis"
        style={{ width: '100%', height: 400, borderRadius: 0 }}
      />
      <div style={{ background: '#fff', borderRadius: '0 0 20px 20px', padding: '32px 20px 0 20px', textAlign: 'center' }}>
        <div style={{ fontSize: 24, fontWeight: 600, marginBottom: 16 }}>皮肤分析</div>
        <div style={{ color: '#666', fontSize: 15, marginBottom: 32 }}>
          结果指导个性化护肤，帮助选择合适的产品<br />以实现最佳皮肤健康。
        </div>
        <Button onClick={() => {gotopage()}} style={{ width: '100%', background: '#7356f1', color: '#fff', fontWeight: 500, fontSize: 18, borderRadius: 10, marginBottom: 16 }}>
          开始检查
        </Button>
        <Button onClick={()=>{backhome()}} style={{ width: '100%', background: '#fff', color: '#222', fontWeight: 500, fontSize: 18, borderRadius: 10, border: '1px solid #eee' }} plain>
          回到首页
        </Button>
      </div>
    </div>
  );
}
